	<!-- Plugins -->
	<!-- Important Owl stylesheet -->
	<link rel="stylesheet" href="<?=base_url()?>resources/css/owl.carousel.css">
	<link rel="stylesheet" href="<?=base_url()?>resources/css/owl.theme.css">
	<!-- Include js plugin -->
	<script src="<?=base_url()?>resources/js/owl.carousel.min.js"></script>

</head>
<body>

<? $this->load->view('core/core_menu') ?>

<section id="areaSearch">
	<div class="conttSearch auto_margin">
		<div class="row">
			<div class="col-sm-9 bl1">
				
				<div class="row">
                 <form method="post" action="<?=base_url()?>index.php/equino/busqueda">
					<div class="col-sm-12">
					 <label>BUSCAR POR PALABRA:</label>
					  <input type="text" name="busqueda" class="form-control inp-text">
					</div>
					<div class="col-sm-3">
					 <label>MODALIDAD:</label>
					  <select name="modalidad" id="andar"  class="form-control inp-text" >
                         <option value="" selected="selected" >-Todas-</option>
                         <option value="Trote y Galope (P1)">Trote y Galope (P1)</option>
                         <option value="Trocha y Galope (P2)">Trocha y Galope (P2)</option>
                         <option value="Trocha (P3)">Trocha (P3)</option>
                         <option value="Paso Fino (P4)">Paso Fino (P4)</option>
                         <option value="Mulares y Asnales">Mulares y Asnales</option>
                    </select>
					</div>
				
					<div class="col-sm-3">
					 <label>COLOR:</label>
					  <select name="color" id="andar"  class="form-control inp-text" >
                         <option value="" selected="selected" >-Todos-</option>
                         <option value="Castaño">Castaño</option>
                         <option value="Zaino">Zaino</option>
                         <option value="Moro">Moro</option>
                         <option value="Bayo">Bayo</option>
                         <option value="Cervuno">Cervuno</option>
                         <option value="Alazán">Alazán</option>
                         <option value="Isabelino">Isabelino</option>
                         <option value="Otro">Otro</option>
                    </select> 
					</div>
					
					<div class="col-sm-2">
					 <label>SEXO:</label>
					  <select name="sexo" id="sexo"  class="form-control inp-text"   >
                         <option value="0" selected="selected" >-Todos-</option>
                         <option value="Macho">Macho</option>
                         <option value="Hembra">Hembra</option>
                         <option value="Castrado">Castrado</option>
                    </select>
					</div>
					
					<div class="col-sm-3">
					 <label>PRECIO:</label>
					  <select name="precio"class="form-control inp-text">
                       <option value="" selected>-Todos-</option>
                       <option value="5000000">0 - $5.000.000 </option>
                       <option value="15000000">$5.000.001 - $15.000.000 </option>
                       <option value="30000000">$15.000.001 - $30.000.000 </option>
                       <option value="30000001">$30.000.001 - + </option>
                      </select> 
					</div>
						
					<div class="col-sm-1">
					 <label>EDAD:</label>
					  <select name="edad"class="form-control inp-text">
                       <option value="" selected></option>
                       <option value="1">0 - 1</option>
                       <option value="2">1 - 2 </option>
                       <option value="3">2 - 3 </option>
                       <option value="4">3 - 4 </option>
                       <option value="5">4 - 5 </option>
                       <option value="6">5 - 6 </option>
                       <option value="7">6 - + </option>
                      </select> 
					</div>
					
                    <div class="col-sm-4	">
					 <label>RAZA:</label>
					  <select name="raza" id="raza"  class="form-control inp-text" >
                         <option value="">-Todas-</option>
                         <option value="Caballo Criollo Colombiano" selected="selected" >Caballo Criollo Colombiano</option>
                         <option value="Pony">Pony</option>
                         <option value="Mini Horse">Mini Horse</option>
                         <option value="Pinto Americano">Pinto Americano</option>
                         <option value="Cuarto de Milla">Cuarto de Milla</option>
                         <option value="Apalussa">Apalussa</option>
                         <option value="Percherón">Percherón</option>
                         <option value="Frisón">Frisón</option>
                         <option value="Árabe">Árabe</option>
                    </select>
					</div>
					
                    <div class="col-sm-2">
					 <label>PAÍS:</label>
					  <select name="pais_nacimiento" id="sexo"  class="form-control inp-text"  >
                         <option value="Colombia" selected="selected" >Colombia</option>
                    </select>
					</div>
					<div class="col-sm-3">
					 <label>DEPARTAMENTO:</label>
					  <select name="departamento" id="departamento" class="form-control">
                    	<option value="0" selected="selected" >-Todos-</option>
                	  </select>
					</div>
					<div class="col-sm-3">
					 <label>MUNICIPIO:</label>
					  <select name="municipio" class="form-control" id="municipio" placeholder="">
                	  </select>
					</div>
					<div class="col-sm-12" style="padding-top: 8px;">
					  <button type="submit" class="btn btn-primary">REALIZAR BÚSQUEDA</button>
					</div>
                </form>
				</div>
			
			</div>
			<div class="col-sm-3">
				<div class="row">
				<div class="col-sm-12" style="margin-bottom: 6px;"><a href="<?=base_url()?>index.php/equino/reproductores"><img src="<?=base_url()?>resources/images/reproductores.png"></a></div>
				<div class="col-sm-12"><img src="http://placehold.it/238x124"></div>
				</div>
			</div>
		</div>
	</div>
</section>

<section id="Main">
	<div class="Listado auto_margin">
		<div class="title"><h1>EQUINOS <strong>RECIENTES</strong></h1></div>
		<div class="row">
			
		<? if(count($equinos))
             foreach($equinos as $equino)
             { ?>
            <div class="col-sm-3">
				<div class="item">
					<a href="<?=base_url()?>index.php/equino/detalles/<?= $equino['id_equino'] ?>/<?= url_title($equino['nombre']) ?>">
					<figure><img src="<?=base_url()?>uploads/equinos/m<?= $equino['imagen'] ?>" alt="<?= $equino['nombre'] ?>" class="img-responsive" /></figure></a>
					
					<h3><?= $equino['nombre'] ?></h3>
					<h4><?= $equino['referencia_genetica'] ?></h4>
				<div class="bOpt">
						<span class="tt1">MODALIDAD:</span>
						<span class="tt2"><?= $equino['andar'] ?></span>
					</div>
				<span class="price">$<?= number_format($equino['precio'], 0, ',', '.') ?></span></div>
			</div>
         <?   } ?>     
			
		</div>
		
		<? if(count($slides)){ ?>
		
		<div class="title"><h1>OTROS <strong>EQUINOS</strong></h1></div>
		
		<div id="owl-demo">
			
             <? foreach($slides as $equino)
             { ?>
		          
		    <div class="item">
					<a href="<?=base_url()?>index.php/equino/detalles/<?= $equino['id_equino'] ?>/<?= url_title($equino['nombre']) ?>">
					<figure><img src="<?=base_url()?>uploads/equinos/m<?= $equino['imagen'] ?>" alt="<?= $equino['nombre'] ?>" alt="" class="img-responsive" /></figure>
					<span class="more"></span>
					<h3><?= $equino['nombre'] ?></h3>
					<div class="bOpt">
						<span class="tt1">MODALIDAD:</span>
						<span class="tt2"><?= $equino['andar'] ?></span>
					</div>
					<span class="price">$<?= number_format($equino['precio'], 0, ',', '.') ?></span>
					</a>
			</div>
		    <? } ?>
		 
		</div>
        
		<? } ?>
        
        
	</div>

</section>

<section id="areaSlog">
	<div class="textMiddle auto_margin">
		<span class="tt1">Facilidad, comodidad y agilidad</span>
		<span class="tt2">en la venta de su caballo</span>
		<a href="" class="vButton">VENDA SU EQUINO</a>
	</div>
</section>

<section id="areaBanners" class="auto_margin">
	<div class="row">
		<div class="col-sm-4"><img src="http://placehold.it/318x140"></div>
		<div class="col-sm-4"><img src="http://placehold.it/318x140"></div>
		<div class="col-sm-4"><img src="http://placehold.it/318x140"></div>
	</div>
</section>

<script>
	$(document).ready(function() {
	 
	  $("#owl-demo").owlCarousel({
	 
	      autoPlay: true, //Set AutoPlay to 3 seconds
	 	  navigation : true,	
	      items : 4,
	      itemsDesktop : [1199,3],
	      itemsDesktopSmall : [979,3]
	  });

	// utilizamos la función post, para hacer una llamada AJAX
	$.post("<?=site_url()?>/core/main/obtenerDepartamento", { idPais:52 }, 
    function(html){ $('#departamento').append(html);  } );
	
	$("#departamento").change(function() {
		//Limpiamos el select de municipios
		$('#municipio').html('');
		// utilizamos la función post, para hacer una llamada AJAX
		$.post("<?=site_url()?>/core/main/obtenerMunicipio", { idDepartamento : $(this).val() }, 
		function(html){ $('#municipio').append(html); } );

    });
	
 });
</script>
